import { Link } from "react-router-dom";
import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  DatePicker,
  Select,
  Popconfirm,
  message,
} from "antd";
// 时间选择器的汉化语言包
import locale from "antd/es/date-picker/locale/zh_CN";
import { Table, Tag, Space } from "antd";
import {
  EditOutlined,
  DeleteOutlined,
  CheckSquareFilled,
} from "@ant-design/icons";
// import img404 from '../../assets/error'
import error from "../../assets/error.png";
import { useChannel } from "../../hooks/useChannel";
const { Option } = Select;
const { RangePicker } = DatePicker;
import { getArticleListAPI } from "../../apis/arrticle";
import { useState } from "react";
import { useEffect } from "react";
import { deleteArticleAPI } from "../../apis/arrticle";
import { useNavigate } from "react-router-dom";
import { useSearchParams } from "react-router-dom";

const Article = () => {
  const { article } = useChannel();
  // 调转到编辑页面
  const navigate = useNavigate();
  // 批准申请
  const approve = (data) => {
    console.log(data);
    // 提示批准成功
    message.success("批准成功");
  };
  // 查看详情
  // const edit = (data) => {
  //   console.log(data);
  //   // navigate(`/detail?data=${data.ID}`);
  //   navigate(`/detail`);
  // };
  // 准备列数据
  const columns = [
    {
      title: "学号",
      dataIndex: "Scode",
    },
    {
      title: "姓名",
      dataIndex: "Sname",
    },
    {
      title: "所在学院",
      dataIndex: "Sxy",
    },
    {
      title: "办事类型",
      dataIndex: "Ttype",
    },
    {
      title: "预约时间",
      dataIndex: "Ttime",
    },
    {
      title: "部门名称",
      dataIndex: "Dname",
    },
    {
      title: "手机号",
      dataIndex: "Stel",
    },
    {
      title: "事宜描述",
      dataIndex: "Desctipion",
    },
    {
      title: "查看详情",
      render: (data) => {
        return (
          <Space size='middle'>
            {/* 编辑按钮 */}
            <Button
              type='primary'
              shape='circle'
              danger
              icon={<EditOutlined />}
              // onClick={}
              onClick={() => navigate(`/detail?id=${data.ID}`)}
            />
          </Space>
        );
      },
    },
    {
      title: "批准申请",
      render: (data) => {
        return (
          <Space size='middle'>
            {/* 批准申请 */}
            {/* <Popconfirm
              title='批准申请'
              description='是否确认批准申请?'
              onConfirm={() => confirm(data)}
              okText='Yes'
              cancelText='No'
            >
              <Button
                type='primary'
                success
                shape='circle'
                icon={<CheckSquareFilled />}
              />
            </Popconfirm> */}
            <Button
              type='primary'
              success
              shape='circle'
              icon={<CheckSquareFilled />}
              onClick={() => approve(data)}
            />
          </Space>
        );
      },
    },
  ];

  // 获取文章列表
  const [list, setList] = useState([]);
  const [count, setCount] = useState(0);
  //1.准备接口的参数
  const [reqData, setReqData] = useState({
    status: "",
    channel_id: "",
    begin_pubdate: "",
    end_pubdate: "",
    page: 1,
    per_page: 4,
  });
  useEffect(() => {
    const role = localStorage.getItem("role");
    // console.log(role, "身份1111");
    // 获取列表数据
    // async function getList() {
    //   const res = await getArticleListAPI(reqData);
    //   setList(res.data.results);
    //   setCount(res.data.total_count);
    // }
    // getList();
    // 依赖的数据发生变化时候，useeffect内部的逻辑会重新执行
    setList([
      {
        ID: "8218",
        Scode: "2021213725",
        Sname: "张三",
        Sxy: "信息学院",
        Ttype: "Pop",
        Ttime: "2019-03-11 09:00:00",
        Dname: "学工部",
        Stel: 19861001519,
        Desctipion: "wkwebview离线化加载h5资源解决方案",
      },
      {
        ID: "8888",
        Scode: "2021213725",
        Sname: "张三",
        Sxy: "信息学院",
        Ttype: "Pop",
        Ttime: "2019-03-11 09:00:00",
        Dname: "学工部",
        Stel: 19861001519,
        Desctipion: "wkwebview离线化加载h5资源解决方案",
      },
      {
        ID: "1111",
        Scode: "2021213725",
        Sname: "张三",
        Sxy: "信息学院",
        Ttype: "Pop",
        Ttime: "2019-03-11 09:00:00",
        Dname: "学工部",
        Stel: 19861001519,
        Desctipion: "wkwebview离线化加载h5资源解决方案",
      },
      {
        ID: "8218",
        Scode: "2021213725",
        Sname: "张三",
        Sxy: "信息学院",
        Ttype: "Pop",
        Ttime: "2019-03-11 09:00:00",
        Dname: "学工部",
        Stel: 19861001519,
        Desctipion: "wkwebview离线化加载h5资源解决方案",
      },
      {
        ID: "8218",
        Scode: "2021213725",
        Sname: "张三",
        Sxy: "信息学院",
        Ttype: "Pop",
        Ttime: "2019-03-11 09:00:00",
        Dname: "学工部",
        Stel: 19861001519,
        Desctipion: "wkwebview离线化加载h5资源解决方案",
      },
      {
        ID: "8218",
        Scode: "2021213725",
        Sname: "张三",
        Sxy: "信息学院",
        Ttype: "Pop",
        Ttime: "2019-03-11 09:00:00",
        Dname: "学工部",
        Stel: 19861001519,
        Desctipion: "wkwebview离线化加载h5资源解决方案",
      },
    ]);
    setCount(list.length);
  });
  //  [reqData]
  //筛选文章功能

  //  获取筛选数据
  const onFinish = (formValue) => {
    console.log(formValue.date[0].format("YYYY-MM-DD"));
    // 用收集到的表单数据重新改变数组触发调用接口获取新数据
    setReqData({
      // 先把原来的对象的值解构出来，再修改里面的值
      ...reqData,
      channel_id: formValue.channel_id,
      status: formValue.status,
      // begin_pubdate:formValue.date[0].format('YYYY-MM-DD'),
      begin_pubdate: formValue.date[0].format("YYYY-MM-DD"),
      end_pubdate: formValue.date[1].format("YYYY-MM-DD"),
      // end_pubdate:formValue.date[1].format('YYYY-MM-DD'),
    });
  };
  // 点击切换页数时
  const onPageChange = (value) => {
    console.log(value);
    setReqData({
      ...reqData,
      page: value,
    });
  };

  return (
    <div>
      {/* 筛选区域 */}
      <Card
        title={
          <Breadcrumb
            items={[{ title: <Link to={"/"}>首页</Link> }, { title: "待审批" }]}
          />
        }
        style={{ marginBottom: 10 }}
      >
        <Form initialValues={{ status: "" }} onFinish={onFinish}>
          <Form.Item label='学院' name='channel_id'>
            <Select
              placeholder='选择学院申请记录'
              //   defaultValue={article[0]}

              style={{ width: 180 }}
            ></Select>
          </Form.Item>

          <Form.Item label='日期' name='date'>
            {/* 传入locale属性 控制中文显示*/}
            <RangePicker locale={locale}></RangePicker>
          </Form.Item>

          <Form.Item>
            <Button type='primary' htmlType='submit' style={{ marginLeft: 40 }}>
              筛选
            </Button>
          </Form.Item>
        </Form>
      </Card>
      {/* 文章列表区域 */}
      <Card title={`共${count}条待审批申请：`}>
        <Table
          rowKey='id'
          columns={columns}
          dataSource={list}
          pagination={{
            total: count,
            pageSize: reqData.per_page,
            onChange: onPageChange,
          }}
        />
      </Card>
    </div>
  );
};

export default Article;
